
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础JavaScript练习（二）</title>
    <style>
        li{
            background-color: #ff4834;
            width: 25px;
            display: inline-block;
            color: white;
            float: left;
            text-align: center;
        }
    </style>
</head>
<body>
<input type="text"  id="input">
<button id="left-in">左侧入</button>
<button id="right-in">右侧入</button>
<button id="left-out">左侧出</button>
<button id="right-out">右侧出</button>
<button id="queue">排序</button>
<p>当前元素的个数为:<span id="num">0</span></p>
<ul id="ul-list"></ul>
<script>
    var put=document.getElementById("input");
    var left_in=document.getElementById("left-in");
    var right_in=document.getElementById("right-in");
    var left_out=document.getElementById("left-out");
    var right_out=document.getElementById("right-out");
    var queue=document.getElementById("queue");
    var ul=document.getElementById("ul-list");
    var li_num=ul.getElementsByTagName("li");
    var sam=document.getElementById("num");
    var i=60;
    //左插入
    left_in.onclick=function () {
        if(li_num.length<i){
            if (isNaN(put.value)||put.value<10||put.value>100){
                alert("请输入10到100的数字");
            }
            else {
                var li=document.createElement("li");
                li.innerHTML=put.value;
                li.style.height=put.value+'px';
                li.style.marginTop=(100-put.value)+'px';
                ul.insertBefore(li,ul.firstChild)
                sam.innerHTML=li_num.length;
            }
        }
        else{
            alert("li元素已经达到60个");
        }
    }
    //右插入
    right_in.onclick=function () {
        if(li_num.length<i){
            if (isNaN(put.value)||put.value<10||put.value>100){
                alert("请输入10到100的数字");
            }
            else {
                var li=document.createElement("li");
                li.innerHTML=put.value;
                li.style.height=put.value+'px';
                li.style.marginTop=(100-put.value)+'px';
                ul.appendChild(li);
                sam.innerHTML=li_num.length;
            }
        }
        else{
            alert("列队超过了60个");
        }
    }
    //左侧出
    left_out.onclick=function () {
        ul.removeChild(ul.firstChild);
        sam.innerHTML=li_num.length;
    }
    //右侧出
    right_out.onclick=function () {
        ul.removeChild(ul.lastChild);
        sam.innerHTML=li_num.length;
    }
    //点击出
    ul.addEventListener("click",function () {
        if (event.target.nodeName.toLowerCase()=="li"){
            ul.removeChild(event.target);
            sam.innerHTML=li_num.length;
        }
    })
    //排序
    queue.onclick=function(){
        var list=[].slice.call(li_num);
        var len=list.length;
        if(len>0){
            list.sort(function(list1,list2){
                var value1=list1.innerHTML;
                var value2=list2.innerHTML;
                return value1-value2;
            });
            for(var n=0; n<len; n++){
                ul.appendChild(list[n]);
            }
        }
        else{
            alert("没有元素，无法排序!")
        }
    }
</script>
</body>
</html>